<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-button type="primary"
                   @click="addRoleDialog()">
          添加角色
        </el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading"
              :data="tableData"
              border
              stripe
              style="width: 100%;"
              @sort-change="sortChange">
      <el-table-column prop="id"
                       label="ID"
                       width="100"
                       align="center"
                       sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column prop="name"
                       label="角色名称"
                       min-width="200"
                       align="center"
                       sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column prop="created_at"
                       label="创建时间"
                       width="300"
                       align="center"
                       sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.createdAt }}
        </template>
      </el-table-column>
      <el-table-column prop="updated_at"
                       label="更新时间"
                       width="300"
                       align="center"
                       sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.updatedAt }}
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       width="200"
                       align="center">
        <template slot-scope="scope">
          <el-button type="text"
                     @click="editRoleDialog(scope.row)">编辑</el-button>
          <el-button type="text"
                     @click="permRoleDialog(scope.row)">授权</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="添加角色"
               width="40%"
               :visible.sync="dialogAddRoleVisible">

      <add-role ref="addRole"
                style="margin-left:30px;"
                :loading="loadingAddRole"
                @submit="addRoleInfo" />
    </el-dialog>

    <el-dialog title="编辑角色"
               width="40%"
               :visible.sync="dialogEditRoleVisible">
      <edit-role style="margin-left:30px;"
                 :row="row"
                 :loading="loadingEditRole"
                 @submit="editRoleInfo" />
    </el-dialog>
    <el-dialog :title="'权限设置-'+row.name"
               width="40%"
               :visible.sync="dialogPermRoleVisible">
      <perm-role style="margin-left:30px;"
                 :row="row"
                 :default-perms="defaultPerms"
                 :perms="perms"
                 :loading="loadingRolePerm"
                 @submit="updateRolePerm" />
    </el-dialog>
  </div>
</template>

<script>
import { addRole, editRole, getMainPerm, getRolePermIds, updateRolePerm } from '@/api/role'
import AddRole from './components/add'
import EditRole from './components/edit'
import PermRole from './components/role'
export default {
  components: { AddRole, EditRole, PermRole },
  props: {
    tableData: {
      default: () => [],
      type: Array
    },
    loading: {
      default: false,
      type: Boolean
    }
  },
  data() {
    return {
      dialogAddRoleVisible: false,
      dialogEditRoleVisible: false,
      dialogPermRoleVisible: false,
      loadingAddRole: false,
      loadingEditRole: false,
      loadingRolePerm: false,
      row: { id: null, name: null },
      perms: [],
      defaultPerms: []
    }
  },
  methods: {
    handleSubmit() {
      this.$emit('submit')
    },
    sortChange(sort) {
      this.$emit('change', {
        field: sort.prop,
        rule: sort.order
      })
      this.$emit('submit')
    },
    addRoleDialog() {
      this.dialogAddRoleVisible = true
      this.$nextTick(() => {
        this.$refs.addRole.handleFormReset()
      })
    },
    editRoleDialog(row) {
      this.dialogEditRoleVisible = true
      this.row.id = row.id
      this.row.name = row.name
    },
    permRoleDialog(row) {
      if (this.perms.length <= 0) {
        this.getMainPerm()
      }
      this.dialogPermRoleVisible = true
      this.row.id = row.id
      this.row.name = row.name
      this.getRolePermIds(row.id)
    },
    addRoleInfo(form) {
      this.loadingAddRole = true
      addRole(form).then(res => {
        this.$message({
          message: '添加成功',
          type: 'success',
          duration: 3 * 1000
        })
        this.handleSubmit()
        this.loadingAddRole = false
        this.dialogAddRoleVisible = false
      }).catch(err => {
        this.loadingAddRole = false
      })
    },
    editRoleInfo(form) {
      this.loadingEditRole = true
      editRole(form).then(res => {
        this.$message({
          message: '修改成功',
          type: 'success',
          duration: 3 * 1000
        })
        this.handleSubmit()
        this.loadingEditRole = false
        this.dialogEditRoleVisible = false
      }).catch(err => {
        this.loadingEditRole = false
      })
    },
    updateRolePerm(data) {
      this.loadingRolePerm = true
      updateRolePerm(data).then(res => {
        this.$message({
          message: '授权成功',
          type: 'success',
          duration: 3 * 1000
        })
        this.loadingRolePerm = false
        this.dialogPermRoleVisible = false
      }).catch(err => {
        this.loadingRolePerm = false
      })
    },
    async getMainPerm() {
      this.perms = await getMainPerm()
    },
    async getRolePermIds(roleId) {
      this.defaultPerms = await getRolePermIds({ 'roleId': roleId })
    }
  }
}
</script>

<style lang="scss">
.el-table th.gutter {
  display: table-cell !important;
}
</style>
